<template>
  <el-main>
    <div class="teacher">
      <div class="app-table">
        <div class="app-body">
          <div class="app-search">
            <el-form :inline="true" class="demo-form-inline" v-model="form">
              <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="form.title"></el-input>
              </el-form-item>
              <!-- <el-form-item label="描述">
                <el-input
                  placeholder="请输入描述"
                  v-model="form.content"
                ></el-input>
              </el-form-item> -->
              <el-form-item label="创建人">
                <el-input placeholder="请输入创建人" v-model="form.createName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" plain>搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="list" style="width: 100%" border :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="主键" width="80" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="content" label="描述" />
            <!-- <el-table-column prop="status" label="收集状态" /> -->
            <el-table-column prop="count" label="收到数据" width="100" />
            <!-- <el-table-column prop="type" label="类型" /> -->
            <!-- <el-table-column prop="createName" label="创建人" /> -->
            <el-table-column prop="createTime" label="创建时间" :formatter="formatDate" width="170" />
            <!-- <el-table-column prop="startTime" label="开始日期" /> -->
            <!-- <el-table-column prop="endTime" label="结束时间" /> -->
            <!-- <el-table-column prop="updateTime" label="更新时间" /> -->
            <el-table-column label="操作" width="260px">
              <template style="display: block" #default="scope">
                <!-- <el-button
                  size="small"
                  type="warning"
                  @click="goAnalysis(scope.row.uuid)"
                  >分析
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="goDesign(scope.row.uuid)"
                  >设计
                </el-button> -->
                <el-button size="small" type="success" @click="editQusetionnaire(scope.row.id)">恢复
                </el-button>
                <el-button size="small" type="danger" @click="deleteQusetionnaire(scope.row.id)">彻底删除
                </el-button>
              </template>
            </el-table-column>
            <template v-slot:empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
          <el-config-provider :locale="locale">
            <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
              @current-change="changeCurrentPage">
            </el-pagination>
          </el-config-provider>
        </div>
        <bottomView />
      </div>
    </div>
  </el-main>
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";

export default {
  name: "QusetionnaireListView",
  data() {
    return {
      type: 0,
      title: "",
      page: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      form: {
        title: "",
        content: "",
        createName: "",
      },
    };
  },
  components: {
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
    Upload, bottomView,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {
    this.getQusetionnaireList();
  },
  watch: {
    $route() {
      this.getQusetionnaireList();
    },
  },
  methods: {
    editQusetionnaire(id) {
      ElMessageBox.confirm("确定要恢复本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("effect", 0);
          if (id) {
            params.append("id", id);
            httpService("/javaApi/qtQuestionnaire/edit", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("恢复成功");
                  this.getQusetionnaireList();
                } else {
                  ElMessage.error("恢复失败");
                }
              }
            );
          }
        })
        .catch(() => { });
    },
    deleteQusetionnaire(id) {
      ElMessageBox.confirm("确定要彻底删除本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService(
            "/javaApi/qtQuestionnaire/deleteById",
            "id=" + id,
            "post"
          ).then((data) => {
            if (data.code == 200) {
              ElMessage.success("删除成功");
              this.getQusetionnaireList();
            } else {
              ElMessage.error("删除失败，请重试！");
            }
          });
        })
        .catch(() => { });
    },
    reloadData() {
      this.page = 1;
      this.getQusetionnaireList();
    },
    goDesign(uuid) {
      let routeData = this.$router.resolve({
        name: "Design",
        query: {
          p: uuid,
        },
      });
      window.open(routeData.href, "_blank");
    },

    onSubmit() {
      this.getQusetionnaireList();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;
      this.getQusetionnaireList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getQusetionnaireList();
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },
    getQusetionnaireList() {
      httpService(
        "/javaApi/qtQuestionnaire/list/" + this.page + "/" + this.pageSize,
        {
          title: this.form.title,
          content: this.form.content,
          createName: this.form.createName,
          effect: 1,
        },
        "get"
      ).then((data) => {
        this.list = data.list;
        this.total = data.total;
        this.pageCount = data.pages;
      });
    },
    formatDate(row, column) {
      let data = row[column.property];
      let dt = new Date(data);
      let month = dt.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let hours = dt.getHours();
      if (hours < 10) {
        hours = "0" + hours;
      }
      let mDate = dt.getDate();
      if (mDate < 10) {
        mDate = "0" + mDate;
      }
      let minutes = dt.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = dt.getSeconds();
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return (
        dt.getFullYear() +
        "-" +
        month +
        "-" +
        mDate +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-search {
  margin-top: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 242px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>

<style>
.el-dialog {
  position: relative;
  margin: 80px auto 50px;
}
</style>